<?php get_header(); ?>

<script>
  var display_per_page = 15;
  var width_per_element = 160+10;
  var col = 3;
  var row = 5;
  
  var width_pagination = 20;
  
  var now = 0;
  var n = 1;
  
  $(document).ready(function(){
    var total = $(".img").length;
    var points = (parseInt(total/display_per_page)+1);
    
    // divide photo per page
    for(var a=1;a<=points;a++){
      $('.image-frame').append('<div id="page'+a+'" class="page"></div>');
    }
    
    b=0;
    $('.img').each(function(){
      if(b/(display_per_page) == 1){
        n++;
      }
      $('#page'+n).append($(this));
      b++;
    });
    
    $('.image-frame').css('width', 960*points);

    // set pagination
    // var points = (parseInt(total/display_per_page)+1);
    for(var a =1; a<= points; a++){
      $(".pagination ul").append("<li></li>");
    }
    
    $(".pagination ul").css('width', points*width_pagination);
    $(".pagination ul li:nth-child(1)").addClass('active');
    
    $(".pagination ul li").click(function(){
      // $('.img').fadeOut('fast');
      
      now = $(this).index();
      now = (now) + 1;
      
      past = $(".pagination ul").find("li.active").index();
      past = (past) + 1;

      $(".pagination ul li").removeClass('active');
      $(this).addClass('active');
      
      if(past<now){
        $('.page').animate({
          left: '-='+960
        });
      }else{
        $('.page').animate({
          left: '+='+960
        });
      }
      
      // $('.img:nth-child(n+'+now+')').fadeIn('fast');
    });
  });
</script>

<script>
  $(document).ready(function(){
    $('.product-content ul li').click(function(){
      $('.product-content ul li').removeClass('active');
      $(this).addClass('active');
      
      var index = $('.product-content ul li').index(this);
      $('.product-content > p').fadeOut('fast');
      $('.product-content > p:eq('+index+')').fadeIn('fast');
    });
  });
</script>

<?php $category = get_the_category(); ?>
<?php $posts = get_posts('category=' . $category[0]->cat_ID. '&&orderby=post_date&&order=DESC&&numberposts=-1'); ?>

<div class="content-top single">
  <div class="wrapper">
    <?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>
    
    <div class="box rounded-equal single-info">
      <h3><?php echo $category[0]->name; ?></h3>
      
      <div class="picture-frame">
        <?php the_post_thumbnail(); ?>
      </div>
      
      <div class="product-content">
        <h4><?php echo $post->post_title; ?></h4>
        
        <ul>
          <li class="active"><p>Description</p></li>
          <li><p>Packaging</p></li>
          <li><p>Nutrition</p></li>
          <li><p>Recipe</p></li>
          <li><p>Point of Sales</p></li>
        </ul>
        
        <p><?php echo $post->post_content; ?></p>
        <p><?php echo get_field('packaging'); ?></p>
      </div>
    </div>
  </div>
</div>
<div class="content-bottom slide">
  <div class="wrapper">
      <div class="products full">
        <h3><?php echo $category[0]->name; ?></h3>
        
        <div id="image-slideshow">
          <div class="image-frame">
            <?php if (have_posts()) : ?>
              <?php foreach($posts as $post){ ?>
                <div class="img">
                  <a href="<?php echo get_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                  </a>
                </div>
              <?php } ?>
            <?php endif; ?>
          </div>
          
          <div class="pagination">
            <ul></ul>
          </div>
        </div>
      </div>
  </div>
</div>

<?php get_footer(); ?>